<template>
	<view class="container">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" 	indicator-color="#000" 	indicator-active-color="#fff" :interval="interval" :duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
		<view class="product-list uni-flex">
			<navigator class="product-item" hover-class="none">
				<image :src="require('./images/lywz.svg')"></image>
				<p class="product-name">铃音文字</p>
			</navigator>
			<navigator url="../poster/poster" class="product-item" hover-class="none">
				<image :src="require('./images/xchb.svg')"></image>
				<p class="product-name">产品海报</p>
			</navigator>
			<navigator class="product-item" hover-class="none">
				<image :src="require('./images/hysp.svg')"></image>
				<p class="product-name">行业视频</p>
			</navigator>
			<view class="product-item" @click="showProductTip=true">
				<image :src="require('./images/khtd.svg')"></image>
				<p class="product-name">客户提单</p>
			</view>
		</view>
		<view class="block">
			<view class="block-top uni-inline-item justify-between">
				<view class="block-title uni-inline-item">
					<view class="title-line" style="background: #6EA2C7;"></view>
					业务订购
				</view>
				<text class="top-right" @click="showBusinessDesc=true">业务解释</text>
			</view>
			<view class="uni-flex justify-between" style="padding-bottom: 30rpx;">
				<navigator open-type="switchTab" url="/pages/groupmanage/groupmanage" hover-class="none" class="bussiness-item">
					<view class="bussiness-title">个付新建集团</view>
					<view class="bussiness-content uni-flex justify-between align-items-bottom">
						<image :src="require('./images/go1.svg')" class="go-btn"></image>
						<image :src="require('./images/gf.svg')" class="bussiness-icon"></image>
					</view>
				</navigator>
				<view class="bussiness-item" @click="showProductTip=true">
					<view class="bussiness-title">统付新建集团</view>
					<view class="bussiness-content uni-flex justify-between align-items-bottom">
						<image :src="require('./images/go2.svg')" class="go-btn"></image>
						<image :src="require('./images/tf.svg')" class="bussiness-icon"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="block-top uni-inline-item justify-between">
				<view class="block-title uni-inline-item">
					<view class="title-line" style="background: #53ABF7;"></view>
					业务公告
					<view class="unread">({{noticeCount}}条未读)</view>
				</view>
				<navigator url="/pages/notice/notice" class="top-right uni-inline-item">更多<uni-icons type="forward" size="16"></uni-icons></navigator>
			</view>
			<view class="notice-block">
				<view class="notice-top uni-flex">
					<view class="notice-top-left uni-flex-item uni-inline-item">
						<text class="notice-title text-overflow-hidden">{{notice.title}}</text>
						<view v-if="notice.type==1" style="background-color: #F39800;" class="yys-tag no-shrink yys-tag1">重要通知</view>
						<view v-if="notice.type==2" style="background-color: #014FA1;" class="yys-tag no-shrink yys-tag2">电信</view>
						<view v-if="notice.type==3" style="background-color: #008ED7;" class="yys-tag no-shrink yys-tag2">移动</view>
						<view v-if="notice.type==4" style="background-color:#DA241E;" class="yys-tag no-shrink yys-tag2">联通</view>
					</view>
					<view class="notice-top-right no-shrink">
						<view class="notice-time" :class="notice.isread==2?'new-notice':''">{{notice.send_time}}</view>
					</view>
				</view>
				<view @click="showPopUp">
					<template v-if="notice.type==1">
						<view v-if="notice.merchant" class="notice-cell uni-flex">
							<view class="notice-cell-title">运营商：</view>
							<view class="notice-cell-content">{{notice.merchant==1?'电信':notice.merchant==2?'移动':'联通'}}</view>
						</view>
						<view v-if="notice.noticecategory" class="notice-cell uni-flex">
							<view class="notice-cell-title">通知类别：</view>
							<view class="notice-cell-content">{{notice.noticecategory==0?'操作功能':notice.noticecategory==1?'营销数据':'其他'}}</view>
						</view>
						<view v-if="notice.province" class="notice-cell uni-flex">
							<view class="notice-cell-title">省份：</view>
							<view class="notice-cell-content">{{notice.province}}</view>
						</view>
					</template>
					<template v-else>
						<template v-if="notice.conditionopt==0">
							<view v-if="notice.stopprovince" class="notice-cell uni-flex">
								<view class="notice-cell-title">暂停省份：</view>
								<view class="notice-cell-content">{{notice.stopprovince}}</view>
							</view>
							<view v-if="notice.recoverprovince" class="notice-cell uni-flex">
								<view class="notice-cell-title">恢复省份：</view>
								<view class="notice-cell-content">{{notice.recoverprovince}}</view>
							</view>
						</template>
						<template v-if="notice.conditionopt==1">
							<view v-if="notice.msg" class="notice-cell uni-flex">
								<view class="notice-cell-title">短信：</view>
								<view class="notice-cell-content">{{notice.msg}}</view>
							</view>
							<view v-if="notice.newphone" class="notice-cell uni-flex">
								<view class="notice-cell-title">电话：</view>
								<view class="notice-cell-content">{{notice.newphone}}</view>
							</view>
						</template>
						<template v-if="notice.conditionopt==2">
							<view v-if="notice.openfeeprovince" class="notice-cell uni-flex">
								<view class="notice-cell-title">开通省份：</view>
								<view class="notice-cell-content">{{notice.openfeeprovince}}</view>
							</view>
							<view v-if="notice.functionfee" class="notice-cell uni-flex">
								<view class="notice-cell-title">功能费：</view>
								<view class="notice-cell-content">{{notice.functionfee}}</view>
							</view>
							<view v-if="notice.monthfee" class="notice-cell uni-flex">
								<view class="notice-cell-title">包月费：</view>
								<view class="notice-cell-content">{{notice.monthfee}}</view>
							</view>
						</template>
					</template>
					<view class="notice-cell uni-flex">
						<text class="notice-cell-title">公告内容：</text>
						<view class="notice-cell-content notice-body text-overflow-hidden notice-body-overflow" v-html="notice.content"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="block-top uni-inline-item justify-between">
				<view class="block-title uni-inline-item">
					<view class="title-line" style="background: #5E93FB;"></view>
					推荐
				</view>
			</view>
			<view class="uni-flex justify-between" style="padding-bottom: 30rpx;">
				<view @click="go400MiniProgram" class="recommend-product uni-inline-item justify-center">
					<image class="product-icon" :src="require('./images/400tel.svg')"></image>
					<text class="product-name">400电话</text>
				</view>
				<navigator url="/pages/poster/poster" hover-class="none" class="recommend-product uni-inline-item justify-center">
					<image class="product-icon" :src="require('./images/xchb.svg')"></image>
					<text class="product-name">宣传海报</text>
				</navigator>
			</view>
		</view>
		<tab-bar :tabIndex="0"></tab-bar>
		<popup :show="showProductTip" :showCloseBtn="false" tipText="开发中，敬请期待" @closePopup="showProductTip=false"></popup>
		
		<popup :show="showBusinessDesc" :showCloseBtn="true" title="业务解释" :stopClose="true" @closePopup="showBusinessDesc=false">
			<view class="bussiness-desc uni-flex">
				<text class="bussiness-desc-title">统付：</text>
				<view class="bussiness-desc-content">渠道商向公司统一收取企业视频彩铃功能及包月费用并为该公司的成员统一办理视频彩铃，公司员工个人手机无需支付费用。</view>
			</view>
			<view class="bussiness-desc uni-flex" style="padding-bottom: 29rpx;">
				<text class="bussiness-desc-title">个付：</text>
				<view class="bussiness-desc-content">渠道为个人用户办理视频彩铃后，由运营商每月通过手机号码进行扣费。</view>
			</view>
		</popup>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog  mode="input" title="业务公告" cancelText="关闭" confirmText="更多公告" @close="closePopup"  @confirm="goNoticeList">
				<view class="popup-notice notice-block">
					<view class="notice-top uni-flex">
						<view class="notice-top-left uni-flex">
							<text class="notice-title">{{notice.title}}</text>
						</view>
						<view class="notice-top-right no-shrink uni-flex uni-column align-items-bottom">
							<view class="notice-time right">{{notice.send_time}}</view>
							<view v-if="notice.product_type_id==20" style="background-color: #F39800;" class="product-tag right">视频彩铃</view>
							<view v-if="notice.product_type_id==1" style="background-color: #5374F7;" class="product-tag right">企业彩铃</view>
						</view>
					</view>
					<view>
						<template v-if="notice.type==1">
							<view v-if="notice.merchant" class="notice-cell uni-flex">
								<view class="notice-cell-title">运营商：</view>
								<view class="notice-cell-content">{{notice.merchant==1?'电信':notice.merchant==2?'移动':'联通'}}</view>
							</view>
							<view v-if="notice.noticecategory" class="notice-cell uni-flex">
								<view class="notice-cell-title">通知类别：</view>
								<view class="notice-cell-content">{{notice.noticecategory==0?'操作功能':notice.noticecategory==1?'营销数据':'其他'}}</view>
							</view>
							<view v-if="notice.province" class="notice-cell uni-flex">
								<view class="notice-cell-title">省份：</view>
								<view class="notice-cell-content">{{notice.province}}</view>
							</view>
						</template>
						<template v-else>
							<template v-if="notice.conditionopt==0">
								<view v-if="notice.stopprovince" class="notice-cell uni-flex">
									<view class="notice-cell-title">暂停省份：</view>
									<view class="notice-cell-content">{{notice.stopprovince}}</view>
								</view>
								<view v-if="notice.recoverprovince" class="notice-cell uni-flex">
									<view class="notice-cell-title">恢复省份：</view>
									<view class="notice-cell-content">{{notice.recoverprovince}}</view>
								</view>
							</template>
							<template v-if="notice.conditionopt==1">
								<view v-if="notice.msg" class="notice-cell uni-flex">
									<view class="notice-cell-title">短信：</view>
									<view class="notice-cell-content">{{notice.msg}}</view>
								</view>
								<view v-if="notice.newphone" class="notice-cell uni-flex">
									<view class="notice-cell-title">电话：</view>
									<view class="notice-cell-content">{{notice.newphone}}</view>
								</view>
							</template>
							<template v-if="notice.conditionopt==2">
								<view v-if="notice.openfeeprovince" class="notice-cell uni-flex">
									<view class="notice-cell-title">开通省份：</view>
									<view class="notice-cell-content">{{notice.openfeeprovince}}</view>
								</view>
								<view v-if="notice.functionfee" class="notice-cell uni-flex">
									<view class="notice-cell-title">功能费：</view>
									<view class="notice-cell-content">{{notice.functionfee}}</view>
								</view>
								<view v-if="notice.monthfee" class="notice-cell uni-flex">
									<view class="notice-cell-title">包月费：</view>
									<view class="notice-cell-content">{{notice.monthfee}}</view>
								</view>
							</template>
						</template>
						<view class="notice-cell uni-flex">
							<text class="notice-cell-title">公告内容：</text>
							<view class="notice-cell-content notice-body" v-html="notice.content"></view>
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {formatRichText} from '../../common/util.js'
	import tabbar from 'components/tab-bar/tab-bar'
	import {
		baseUrl
	} from '../../common/util.js'
	export default {
		data() {
			return {
				interval: 5000,
				duration: 1000,
				showProductTip:false,
				showBusinessDesc:false,
				noticeCount:0,
				notice:{}
			}
		},
		onLoad() {
			this.getNotice()
		},
		methods: {
			showPopUp(index){
				this.$refs.popup.open()
				this.addNoticeReadRecord()
			},
			closePopup(){
				this.getNotice()
			},
			addNoticeReadRecord(){
				this.$request.addNoticeReadRecord({
					businessnotice_id:this.notice.businessnotice_id
				})
			},
			getNotice(){
				this.$request.queryIndexNotice({
					noticetype:2,
				}).then(res=>{
					if(res.code==0){
						this.noticeCount=res.num
						var notice=res.data
						notice.content=formatRichText(notice.content)
						this.notice=notice
					}
				})
			},
			
			goNoticeList(){
				uni.navigateTo({
					url:'/pages/notice/notice'
				})
			},
			go400MiniProgram(){
				uni.navigateToMiniProgram({
				  appId:'拼多多小程序id',
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 10rpx 30rpx 98rpx;
		font-family: 'Source Han Sans CN';
	}
	.swiper{
		width: 100%;
		height: 280rpx;
		border-radius: 10rpx;
		overflow: hidden;
		swiper-item{
			background-color: #fff;
			navigator{
				width: 100%;
				height: 100%;
			}
		}
	}
	.product-list{
		height: 186rpx;
		.product-item{
			padding-top: 40rpx;
			padding-bottom: 22rpx;
			width: 25%;
			image{
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto;
			}
			.product-name{
				color: #444;
				font-size: 26rpx;
				text-align: center;
				line-height: 64rpx;
				
			}
		}
	}
	.block{
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
		.block-top{
			height: 90rpx;
			.block-title{
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				.title-line{
					margin-left: 6rpx;
					width: 6rpx;
					height: 26rpx;
					margin-right: 16rpx;
				}
				.unread{
					color: #D52100;
					font-size: 22rpx;
					margin-left: 20rpx;
				}
			}
			.top-right{
				color: #555555;
				font-size: 22rpx;
				.uniui-forward{
					color: rgb(204,204,204);
					margin-left: 0;
				}
			}
		}
		.bussiness-item{
			width: 300rpx;
			height: 160rpx;
			background: rgb(193, 231, 255);
			border-radius: 10rpx;
			padding: 14rpx 30rpx 0;
			&:nth-child(1){
				background-color: #C1E7FF;
				.bussiness-title{
					color: #6EA2C7;
				}
			}
			&:nth-child(2){
				background-color: #DEEEEB;
				.bussiness-title{
					color: #408B7F;
				}
			}
			.bussiness-title{
				font-size: 26rpx;
				font-weight: bold;
				line-height: 56rpx;
				height: 56rpx;
			}
			.bussiness-content{
				.go-btn{
					width: 100rpx;
					height: 40rpx;
				}
				.bussiness-icon{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		
		.recommend-product{
			width: 300rpx;
			height: 110rpx;
			background: rgb(242, 246, 255);
			border-radius: 10rpx;
			.product-icon{
				width: 50rpx;
				height: 50rpx;
			}
			.product-name{
				font-size: 26rpx;
				color: #5E93FB;
				margin-left: 40rpx;
			}
		}
	}
	.notice-block{
		border-top: 1PX solid #F5F5F5;
		padding-top: 23rpx;
		padding-bottom: 12px;
		width: 100%;
		.notice-top{
			margin-bottom: 12rpx;
			.notice-top-left{
				flex: 1;
				width: 50%;
				margin-right: 30rpx;
				.notice-title{
					line-height: 40rpx;
					font-size: 26rpx;
					font-weight: bold;
				}
			}
			
			.notice-top-right{
				height: 40rpx;
				.notice-time{
					height: 40rpx;
					line-height: 40rpx;
					font-size: 20rpx;
					color: #666666;
					position: relative;
				}
				.new-notice{
					&:after{
						content: '';
						display: block;
						width: 10rpx;
						height: 10rpx;
						background: rgb(213, 33, 0);
						border-radius: 10rpx;
						position: absolute;
						right: -20rpx;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}
				.product-tag{
					width: 92rpx;
					height: 26rpx;
					background: rgb(243, 152, 0);
					border-radius: 4rpx;
					text-align: center;
					line-height: 26rpx;
					color: #fff;
					font-size: 20rpx;
					margin-top: 6rpx;
				}
			}
		}
		.notice-cell{
			margin-bottom: 12rpx;
			line-height: 36rpx;
			font-size: 24rpx;
			.notice-cell-title{
				width: 120rpx;
				height: 36rpx;
				margin-right: 10rpx;
				color: #333;
				flex-shrink: 0;
				text-align: right;
			}
			.notice-cell-content{
				color: #666;
			}
			.notice-body-overflow{
				height: 36rpx;
			}
		}
		.yys-tag{
			height: 26rpx;
			border-radius: 4rpx;
			text-align: center;
			line-height: 26rpx;
			color: #fff;
			font-size: 18rpx;
		}
		.yys-tag1{
			width: 90rpx;
		}
		.yys-tag2{
			width: 50rpx;
		}
	}
	.popup-notice{
		border-top: none;
		padding: 0;
		.notice-title{
			font-size: 28rpx!important;
		}
		.notice-body{
			max-height: 400rpx;
			overflow: auto;
		}
	}
	.bussiness-desc{
		margin-bottom: 14rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.bussiness-desc-title{
			width: 72rpx;
			color: #333;
			flex-shrink: 0;
			line-height: 40rpx;
		}
		.bussiness-desc-content{
			color: #666;
			line-height: 40rpx;
		}
	}
</style>
